<template>
	<el-container>
		<el-main>
			<h3>小工具</h3>
			<el-space>
				<!-- 工具卡片部分：压缩 / 解压缩 -->
				<el-card class="tools-card" shadow="hover">
					<el-space class="content" direction="vertical">
						<p>压缩 / 解压缩</p>
						<span>前端压缩 / 解压缩，无需上传到服务器</span>
						<el-button class="tools-button">使用</el-button>
					</el-space>
				</el-card>
			</el-space>
		</el-main>
	</el-container>
</template>

<script setup name="Tools">
import { gzip, gunzip } from '@/scripts/zlib.js';

const a = gzip('asdfghjkl;', 'base64')
let b = gzip('asdfghjkl;')

console.log(a)
console.log(b)
let c = gunzip(a, 'base64');
console.log(c)
</script>

<style lang="less" scoped>
.tools-card {
	width: 15rem;
	min-height: 10rem;
	border: 2px solid rgba(128, 128, 128, 0.3);

	p {
		text-align: center;
		font-size: 1.25rem;
		margin: 1rem 0;
		color: royalblue;
	}

	span {
		padding: 1rem 0;
	}

	.content {
		width: 100%
	}
}
</style>